<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
  #paper {
    position: relative;
    width: 600px;
    height: 400px;
  }
  </style>
</head>
<body>
  <div id="paper"></div>
  <script src="/js/d3.js"></script>
  <script src="/js/spritejs.js"></script>
  <script src="https://s0.ssl.qhres.com/!e6cf89ec/sprite-extend-d3axis.js"></script>
  <script>
  const paper = spritejs.Paper2D('#paper', 600, 400).setResolution(1200, 800)
  const Sprite = spritejs.Sprite,
        Path = spritejs.Path,
        Label = spritejs.Label,
        Axis = spritejs.Axis

  const dataset = [ 125 , 121 , 127 , 193 , 309 ];  //数据（表示矩形的宽度）

  //定义比例尺
  var linear = d3.scaleLinear()
      .domain([100, d3.max(dataset)])
      .range([0, 500]);

  //console.log(linear.domain(), dataset.map(linear))

  const colors = ['#f00', '#0a0', '#00a', '#3ca', '#7ac']

  let s = d3.select(paper).append('fglayer')

  let chart = s.selectAll('sprite')
    .data(dataset)
    .enter()
    .append('sprite')
    .attr('x', 300)
    .attr('y', function(d,i){
      return 200 + i * 55;
    })
    .attr('width', 0)
    .attr('height', 50)
    .attr('bgcolor', 'black')

  chart
       .transition()
       .duration(2000)
       .attr('width',function(d, i){
          return linear(d);
       })
       .attr('bgcolor', function(d, i){
          return colors[i]
       })

  let axis = s.append('axis')
   .attr('ticks', [100,200,300,400])
   .attr('axisScales', [linear])
   .attr('direction', 'bottom')
   .attr('pos', [300, 500])
   .attr('color', 'blue')
   // .attr('bgcolor', 'red')

  chart.on('click', data => {
    console.log(data, d3.event)
  })

  // chart.on('update', data => {
  //   console.log(data, d3.event)
  // })

  </script>
</body>
</html>